<template>
    <el-table :data="userState.list">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="科室编号" />
        <el-table-column prop="createtime" label="科室创建时间">
            <!-- #default 作用域插槽 -->
            <template #default="scoped">

                {{ filters(scoped.row.createtime) }}

            </template>

        </el-table-column>
        <el-table-column prop="name" label="科室名称" />
        <el-table-column prop="maindoctor" label="科室主任" />
    </el-table>
    <!-- 分页 -->
    <el-pagination :page-sizes="[5, 8, 12, 15]" v-model:page-size="pageInfo.size" v-model:current-page="pageInfo.page"
        layout="prev, pager, next, sizes" :total=userState.total />
</template>

<script setup lang="ts">

// vue自带的函数
import { reactive, watchEffect,watch} from 'vue';

// 接口
import { departmentListReq } from '@/api/hospital.api';

import { IUserInfo } from '@/tylp/hospital.tylp';

import dayjs from "dayjs";

const pageInfo = reactive({
    page: 1,
    size: 10,

})


const userState = reactive<{ list: IUserInfo[], total: number }>({

    list: [],
    total: 0

})

// watch(pageInfo, () => {
//     departmentListReq(pageInfo.page, pageInfo.size).then(res => {
//         console.log(res.data.data);
//         userState.list = res.data.data,
//             userState.total = res.data.total!

//     })


// },{
//     deep:true,
//     immediate:true
// })



// 科室管理列表
watchEffect(() => {

    departmentListReq(pageInfo.page, pageInfo.size).then(res => {
        console.log(res.data.data);
        userState.list = res.data.data,
         userState.total = res.data.total!

    })

})

//先定义一个函数filters    日期格式转换
const filters = ((createtime: string) => {

    return dayjs(createtime).format('YYYY-MM-DD:ss')

})


</script>



<style scoped lang="scss">
.el-pagination {
    margin-top: 20px;
}
</style>